<template>
	<view class="uni-tab-bar">
		<scroll-view scroll-x class="uni-swiper-tab" :style="scrollStyle">
			<block v-for="(tab,index) in tabBars" :key="tab.id">
				<view class="swiper-tab-list" :class="{'active':tabIndex === index}" @tap="tabTap(index)" :style="tabItemStyle">{{tab.name}} {{tab.num ? tab.num : ''}}
					<view class="swiper-tab-line" :style="{'width': tabBottomLine + 'upx'}"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			tabBars: {
				type: Array,
				required: true
			},
			tabIndex: {
				type: Number,
				required: true
			},
			scrollStyle: {
				type: String,
				default: ""
			},
			tabItemStyle: {
				type: String,
				default: ""
			},
			tabBottomLine:{
				type:Number,
				default:70
			}
		},
		methods: {
			// 点击
			tabTap(index) {
				this.$emit('tabtap', index)
			}
		}
	}
</script>

<style lang="scss">
	.uni-swiper-tab {
		border-bottom: 1upx solid #EEEEEE;

		.swiper-tab-list {
			color: #969696;
			font-size: 34upx;
			font-weight: bolder;

			.swiper-tab-line {
				border-bottom: 6upx solid transparet;
				width: 70upx;
				margin: 0 auto;
				border-radius: 20upx;
			}

			&.active {
				color: #343434;

				.swiper-tab-line {
					border-bottom: 12upx solid #FEDE33;
				}
			}
		}
	}
</style>
